<template>
  <el-dialog v-el-drag-dialog title="持瓶详情" :visible.sync="visible" width="800px" @closed="reset">
    <div class="content">
      <div class="table-title">使用详情：</div>
      <el-table max-height="140" :data="dialog.detailInfoList">
        <el-table-column prop="specName" label="规格型号" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="goodsCount" label="租瓶数量" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="ownerCount" label="自购瓶数量" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="availableCount" label="可用瓶数" min-width="100" align="center" show-overflow-tooltip />
      </el-table>
      <div class="table-title">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="1">有效押金</el-radio>
          <el-radio :label="2">其他押金</el-radio>
        </el-radio-group>
      </div>
      <el-table max-height="140" :data="deposits">
        <el-table-column prop="depositCode" label="押金单号" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="isShare" label="共享状态" min-width="100" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="row.isShare === 0">非共享</span>
            <span v-if="row.isShare === 1">已共享</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsDesc" label="商品描述" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="ckOrgName" label="押瓶机构" min-width="140" align="center" show-overflow-tooltip />
        <el-table-column prop="depStatus" label="审核状态" min-width="100" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span v-if="row.depStatus === 1">未审核</span>
            <span v-if="row.depStatus === 2">已审核</span>
            <span v-if="row.depStatus === 3">已消单</span>
            <span v-if="row.depStatus === 4">已作废</span>
            <span v-if="row.depStatus === 5">审核不通过</span>
            <span v-if="row.depStatus === 6">消单待确认</span>
            <span v-if="row.depStatus === 7">待提交</span>
            <span v-if="row.depStatus === 8">已退款</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="押金登记时间" min-width="160" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.createTime ? parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}') : '' }}
          </template>
        </el-table-column>
      </el-table>
      <div class="table-title">30天内未签收订单：</div>
      <el-table max-height="140" :data="dialog.orderList">
        <el-table-column prop="orderCode" label="订单号" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="goodsDesc" label="商品" min-width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="transactTime" label="下单时间" min-width="100" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.transactTime? parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}') : '' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { parseTime } from '@/utils'
  export default {
    name: 'foregiftDetail',
    props: {
      dialog: Object
    },
    data() {
      return {
        visible: false,
        radio: 1,
        deposits: []
      }
    },
    methods: {
      parseTime,
      open(dialog) {
        this.visible = true
        this.radio = 1
        this.radioChange(this.radio, dialog)
      },
      radioChange(val, dialog) {
        const dialogData = dialog || this.dialog
        if (dialogData.deposits) {
          if (val === 1) {
            this.deposits = dialogData.deposits.filter((item) => {
              return item.depStatus === 2
            })
          } else {
            this.deposits = dialogData.deposits.filter((item) => {
              return item.depStatus !== 2
            })
          }
        }
      },
      reset() {

      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  .table-title {
    margin-bottom: 10px;
    &:nth-child(3) {
      margin-top: 20px;
    }
    &:nth-child(5) {
      margin-top: 20px;
    }
  }
}

</style>
